<template>
  <div class="model" v-if="showModel" @click="modalClose">
    <div :class="[classData.content]" @click.stop="" :style="{width: width + 'px'}">
      <div class="model-close-btn" v-if="showClose" @click="closeModel">×</div>
      <zy-title v-if="title">{{title}}</zy-title>
      <div class="slot-content">
        <slot></slot>
      </div>
      <div class="foot-btn-box" v-if="showBtn">
        <zy-button @click="closeModel">取消</zy-button>
        <zy-button :type="`primary`" :disabled="disabled" @click="submit" :loading="loading" v-if="isShowSubmit">
          {{submitTitle}}
        </zy-button>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "zyModel",
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			closeOnClickModal: {
				type: Boolean,
				default: () => false
			},
			type: {
				type: String,
				default: () => ''
			},
			loading: {
				type: Boolean,
				default: () => false
			},
			isShowSubmit: {
				type: Boolean,
				default: () => true
			},
			submitTitle: {
				type: String,
				default: () => '确定'
			},
			showBtn: {
				type: Boolean,
				default: () => true
			},
			disabled: {
				type: Boolean,
				default: () => false
			},
			title: {
				type: String,
				default: () => ''
			},
			showClose: {
				type: Boolean,
				default: () => true
			},
			width: {
				type: String,
				default: () => '700'
			}
		},
		data() {
			return {
				showModel: this.show
			};
		},
		computed: {
			classData() {
				return {
					content: this.type ? 'model-content-' + this.type : 'model-content'
				}
			}
		},
		watch: {
			show(val) {
				this.showModel = val;
			}
		},
		methods: {
			modalClose() {
				if (this.closeOnClickModal) {
					this.closeModel();
				}
			},
			closeModel() {
				this.showModel = false;
				this.$emit('close', this.showModel)
			},
			submit() {
				this.$emit('submit', this.loading)
			},
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style lang="less" :scope="true">
  @import "../../style/common/base.less";

  .model {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(000, 000, 000, 0.3);
    width: 100%;
    height: 100%;
    z-index: 10;
    animation: fadeIn .5s;
    display: flex;
    justify-content: center;
    align-items: center;


    .model-content, .model-content-table {
      display: flex;
      flex-direction: column;
      position: relative;
      height: auto;
      background: @allWhite;
      border-radius: 6px;

      .slot-content {
        flex: 1;
        overflow: auto;
      }

      .model-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
        cursor: pointer;
      }
    }

    .model-content {
      max-height: 600px;
      min-height: 200px;
    }

    .model-content-table {
      width: 1100px;
      padding: 24px 0;

      .foot-btn-box {
        padding: 0 24px;
      }
    }

    .foot-btn-box {
      padding: 12px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      button {
        margin-left: 12px;
      }
    }

    .modalInfoTemplate{
      padding: 0 @commonPaddingOutside;
      .modalContent{
        padding-right: @commonPaddingOutside;
      }
    }
  }

  @media screen and (min-width: 1368px) and (max-width: 1440px) {
    .model .model-content, .model .model-content-table {
      top: 120px;
      margin-top: 0;
    }

    .model .model-content {
      max-height: 560px;
    }

    .model .model-content-table {
      .table_list {
        height: 200px !important;;
      }
    }
  }

  @media screen and (max-width: 1368px) {
    .model .model-content, .model .model-content-table {
      top: 80px;
      margin-top: 0;
    }

    .model .model-content {
      max-height: 480px;
    }

    .model .model-content-table {
      .table_list {
        height: 200px !important;;
      }
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
</style>
